<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}
			
			ul,li {
				list-style-type: none;
			}
			
			.active {
				border: 3px solid yellow;
				/*transform: scale(360deg);*/
			}
			
			.noneActive {
				border: 0px;
			}
			
			#container {
				width: 700px;
				height: 500px;
				border: 1px solid #ccc;
				margin: 50px auto;
			}
			
			#title {
				width: 700px;
				height: 50px;
				background: #613712;
				text-align: center;
				line-height: 50px;
				font-size: 24px;
				color: #FFFFFF;
			}
			
			#content {
				width: 496px;
				/*overflow: hidden;*/
				margin-top: 50px;
				margin-left: 102px;
				/*background: red;*/
			}
			
			#content ul {
				width: 496px;
				height: 156px;
			}
			
			#content ul li {
				float: left;
				width: 106px;
				height: 156px;
				margin-left: 18px;
			}
			#content ul li img {
				display: block;
				margin-top: 3px;
				margin-left: 3px;
			}
			#movieIntro {
				width: 496px;
				margin-top: 30px;
			}
			.text1 {
				width: 496px;
				height: 214px;
				margin-left: 124px;
				line-height: 20px;
				display: none;
				
			}
			.text1 h3 {
				font-size: 22px;
				font-weight: bold;
				color: #4E4D52;
			}
			.text1 h3 span {
				font-size: 22px;
				font-weight: bold;
				color: gray;
			}
			.text1 p {
				font-size: 12px;
				color: #8E898B;
			}
			.text2 {
				width: 496px;
				height: 150px;
				line-height: 20px;
			}
			.text1 .text2 h4 {
				font-size: 14px;
				color: darkseagreen;
			}
			.text1 .text2 p {
				font-size: 12px;
				color: black;	
				text-indent: 2em;
			}
		</style>
	</head>
	<body>
		<div id="container">
			<div id="title">
				电影介绍
			</div>
			<div id="content">
				<ul>
					<li><img src="images/image1.png"/></li>
					<li><img src="images/image2.png"/></li>
					<li><img src="images/image3.png"/></li>
					<li><img src="images/image4.png"/></li>
				</ul>
			</div>
			<div id="movieIntro">
				<div class="text1" style="display: block;">
					<h3>头脑特工队 Inside Out <span>(2015)</span></h3>
					<p>导演：彼特•道格特 / 罗纳尔多•德尔•卡门</p>
					<p>
						评分:<span><img src="images/star3.png"/></span>
						<span><img src="images/star3.png"/></span>
						<span><img src="images/star3.png"/></span>
						<span><img src="images/star3.png"/></span>
						<span><img src="images/star4.png"/></span>
					</p>
					<div class="text2">
						<h4>剧情简介......</h4>
						<p>可爱的小女孩莱莉出生在明尼苏达州一个平凡的家庭中，从小她在父母的呵护下长大，脑海中保存着无数美好甜蜜的回忆。当然这些记忆还与几个莱莉未曾谋面的伙伴息息相关，他们就是人类的五种主要情绪：乐乐、忧忧、怕怕、厌厌和怒怒。</p>
					</div>
				</div>
				<div class="text1">
					<h3>机器人瓦力 WALL•E <span>(2008)</span></h3>
					<p>导演：安德鲁•斯坦顿</p>
					<p>
						评分:<span><img src="images/star3.png"/></span>
						<span><img src="images/star3.png"/></span>
						<span><img src="images/star3.png"/></span>
						<span><img src="images/star3.png"/></span>
						<span><img src="images/star3.png"/></span>
					</p>
					<div class="text2">
						<h4>剧情简介......</h4>
						<p>公元2805年，人类文明高度发展，却因污染和生活垃圾大量增加使得地球不再适于人类居住。地球人被迫乘坐飞船离开故乡，进行一次漫长无边的宇宙之旅。临行前他们委托Buynlarge的公司对地球垃圾进行清理，该公司开发了名为WALL•E 的机器人担当此重任。</p>
					</div>
				</div>
				<div class="text1">
					<h3>驯龙高手 How to Train Your Dragon <span>(2010)</span></h3>
					<p>导演：迪恩•德布洛斯 / 克里斯•桑德斯</p>
					<p>
						评分:<span><img src="images/star3.png"/></span>
						<span><img src="images/star3.png"/></span>
						<span><img src="images/star3.png"/></span>
						<span><img src="images/star3.png"/></span>
						<span><img src="images/star4.png"/></span>
					</p>
					<div class="text2">
						<h4>剧情简介......</h4>
						<p>维京岛国的少年小嗝嗝是部落统领伟大的斯托里克的儿子，他非常想像自己的父亲一样亲手屠龙——这些飞龙是岛上维京人放牧羊群的主要天敌——但他每次出现在部落屠龙的战斗中都只给大家徒增烦恼。</p>
					</div>
				</div>
				<div class="text1">
					<h3>美食总动员 Ratatouille <span>(2007)</span></h3>
					<p>导演：布拉德•伯德 / 简•皮克瓦</p>
					<p>
						评分:<span><img src="images/star3.png"/></span>
						<span><img src="images/star3.png"/></span>
						<span><img src="images/star3.png"/></span>
						<span><img src="images/star3.png"/></span>
					</p>
					<div class="text2">
						<h4>剧情简介......</h4>
						<p>小老鼠雷米在嗅觉方面有着无与伦比的天赋，不想过与垃圾堆为伴的生活，心怀成为五星大厨的梦想。一个偶然的机会，他认识了古斯特餐厅的学徒林奎尼，这个倒霉的学徒生性害羞，在厨艺上更是没有什么天赋，并且遭到餐厅大厨的排挤，即将被解雇。这一人一鼠结成了奇特的联盟：雷米奉献自己极富创造力的大脑。操作林奎尼前台“表演”。</p>
					</div>
				</div>
			</div>
		</div>
		
		<script type="text/javascript">
		
			window.onload = function(){
				
				var content = document.getElementById('content');
				var ul = document.getElementsByTagName('ul');
				var img = document.querySelectorAll('#container #content ul li img');
				var textNum = document.getElementsByClassName('text1');
				
				/*for (var i = 0;i < img.length;i ++) {
						
					img[i].setAttribute('pid',i);
				}*/
				
				content.onclick = function(e) {
					
					for (var i = 0;i < img.length;i ++) {
						
						img[i].className = 'noneActive';
						
						textNum[i].style.display = 'none';
					}
					
					e = e || event;
					
					var currObj = e.target || e.srcElement;	
					
					var index = [].indexOf.call(img,currObj);
					
					if (currObj.tagName != 'UL' && currObj.id != 'content') {
						
						currObj.className = 'active';
						
						textNum[index].style.display = 'block';
					}
				}
			}
		</script>
	</body>
</html>
